<template>
  <!-- 综合体账单 - 应收/付 -->
  <!-- 说明：
    1. 此页面虽与 资产经营管理系统 -> 租赁管理 页面字段完全相同，为了避免后期改动，此处复制了一份后做独立处理；
    2. 其余操作按钮页面仍使用 资产经营管理系统 -> 租赁管理 中的，如要修改，注意连带影响；
    3. 此页面中仅展示 综合体 相关的内容，所以相较租赁管理页面，取消了资产类型的下拉选择框，将其值默认设置为 - 5：综合体
  -->
  <div class="synthesisBillPage">
    <!--  头部搜索  -->
    <div class="search-wrap d-flex flex-column">
      <div class="search-box">
        <el-form :inline="true" :disabled="disabled">
          <el-form-item label="关键字">
            <el-input
              v-model="form.queryName"
              placeholder="输入合同名/资产名/承租方/资源名/手机"></el-input>
          </el-form-item>
          <el-form-item label="租金缴纳方式">
            <el-select v-model="form.type">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in rentPaymentTypeOptionsArr"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button color="#fc7018" style="color: #fff" @click="onSearch"
              >搜索</el-button
            >
            <el-button color="#f0f0f0" style="color: #000" @click="onReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div class="menu-box d-flex">
          <el-button
            v-for="(item, index) in menu.list"
            :key="index"
            :class="menu.currentIndex === index ? 'button_view':'button_edit'"
            type="primary"
            @click="selected(index)"
            >{{ item.title }}</el-button
          >
        </div>
        <div class="data-board-box">
          <!-- 默认 -->
          <template v-if="menu.currentIndex === 0">
            <div class="default-box d-flex m-t20 m-b20">
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">项目总数</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ defaultInfo.contractNum }}</span>
                    <span>(处)</span>
                  </div>
                  <img
                    class="item-icon"
                    src="@/assets/iconImg/asset_icon_5.png" />
                </div>
              </div>
              <div class="item-box data-board-item_2 d-flex flex-column j-sb">
                <div class="item-top-box">
                  <span class="title-name">合同金额</span>
                  <div class="number-box">
                    <span>{{ getUnit(defaultInfo.contractTotalPrice) }}</span>
                    <span>(万元)</span>
                  </div>
                </div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="left-box">
                    <span class="title-name">已缴纳金额</span>
                    <div class="number-box">
                      <span>{{
                        getUnit(defaultInfo.paidContractTotalPrice)
                      }}</span>
                      <span>(万元)</span>
                    </div>
                  </div>
                  <img
                    class="item-icon"
                    src="@/assets/iconImg/asset_icon_1.png" />
                </div>
              </div>
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">未缴纳金额</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{
                      getUnit(defaultInfo.unpaidContractTotalPrice)
                    }}</span>
                    <span>(万元)</span>
                  </div>
                  <img
                    class="item-icon"
                    src="@/assets/iconImg/asset_icon_2.png" />
                </div>
              </div>
              <div class="item-box data-board-item_2 d-flex flex-column j-sb">
                <div class="item-top-box">
                  <span class="title-name">罚金</span>
                  <div class="number-box">
                    <span>{{ getUnit(defaultInfo.fine) }}</span>
                    <span>(万元)</span>
                  </div>
                </div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="left-box">
                    <span class="title-name">押金</span>
                    <div class="number-box">
                      <span>{{ getUnit(defaultInfo.deposit) }}</span>
                      <span>(万元)</span>
                    </div>
                  </div>
                  <img class="item-icon" src="@/assets/iconImg/daoqizj.png" />
                </div>
              </div>
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">出租面积</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ defaultInfo.leaseTotalArea || "0" }}</span>
                    <span>(㎡)</span>
                  </div>
                  <img class="item-icon" src="@/assets/iconImg/zichanmj.png" />
                </div>
              </div>
            </div>
          </template>
          <!-- 应收款 -->
          <template v-else-if="menu.currentIndex === 1">
            <div class="payment-box d-flex m-t20 m-b20">
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">项目总数</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ paymentInfo.contractNum || "0" }}</span>
                    <span>(处)</span>
                  </div>
                  <img
                    class="item-icon"
                    src="@/assets/iconImg/asset_icon_5.png" />
                </div>
              </div>
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">应收金额</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ getUnit(paymentInfo.receivables) }}</span>
                    <span>(万元)</span>
                  </div>
                  <img class="item-icon" src="@/assets/iconImg/zichan.png" />
                </div>
              </div>
            </div>
          </template>
          <!-- 应退款 -->
          <template v-else-if="menu.currentIndex === 2 && refundInfo">
            <div class="refund-box d-flex m-t20 m-b20">
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">项目总数</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ refundInfo.contractNum || "0" }}</span>
                    <span>(处)</span>
                  </div>
                  <img
                    class="item-icon"
                    src="@/assets/iconImg/asset_icon_5.png" />
                </div>
              </div>
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">押金</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ getUnit(refundInfo.refundDeposit) }}</span>
                    <span>{{
                      refundInfo.refundInfo > 10000 ? "(万元)" : "(元)"
                    }}</span>
                  </div>
                  <img class="item-icon" src="@/assets/iconImg/zichan.png" />
                </div>
              </div>
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">罚金</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ getUnit(refundInfo.fine) }}</span>
                    <span>{{
                      refundInfo.refundInfo > 10000 ? "(万元)" : "(元)"
                    }}</span>
                  </div>
                  <img
                    class="item-icon"
                    src="@/assets/iconImg/asset_icon_2.png" />
                </div>
              </div>
              <div class="item-box data-board-item d-flex flex-column j-sb">
                <div class="title-name">应退</div>
                <div class="item-bottom-box d-flex a-center j-sb">
                  <div class="number-box">
                    <span>{{ refundInfo.refundAmount || "0" }}</span>
                    <span>{{
                      refundInfo.refundAmount > 10000 ? "(万元)" : "(元)"
                    }}</span>
                  </div>
                  <img class="item-icon" src="@/assets/iconImg/daoqizj.png" />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!--  表格区域  -->
    <div class="table-wrap">
      <public-table
        :index="false"
        :page="page"
        :tableData="tableData"
        :tableOption="tableOption"
        :operation="true"
        :operationWidth="330"
        operationAlign="left"
        operationfixed="right"
        @page-change="onPageChange">
        <template #reminderStatus="scope">
          <el-tooltip
            v-if="scope.row.reminderStatus !== 6"
            class="box-item"
            effect="dark"
            :content="getReminderStatus(scope.row.reminderStatus).title"
            placement="top-start">
            <div
              class="d-flex a-center j-center drop"
              :style="{
                backgroundColor: getReminderStatus(scope.row.reminderStatus)
                  .color,
              }">
              {{ getReminderStatus(scope.row.reminderStatus).name }}
            </div>
          </el-tooltip>
        </template>
        <template #menu="scope">
          <div v-if="scope.row.reminderStatus === 6">
            <el-button
              @click="toBillingHistory(scope.row)"
              v-if="scope.row.auditStatus"
              color="#fc7018"
              style="color: #ffffff"
              >查看历史</el-button
            >
          </div>
          <div v-else>
            <el-button
              @click="toInvoicingManagement(scope.row)"
              color="#93d6ff"
              style="color: #ffffff"
              >开票管理</el-button
            >
            <el-button
              @click="toBillingHistory(scope.row)"
              v-if="scope.row.auditStatus"
              color="#fc7018"
              style="color: #ffffff"
              >查看历史</el-button
            >
            <el-button
              @click="toYingTuiHeXiao(scope.row)"
              v-if="scope.row.auditStatus === 4"
              class="button_funtion"
              >应退核销</el-button
            >
          </div>
        </template>
      </public-table>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption } from "element-plus";
import { rentPaymentTypeOptionsArr } from "@/common/dict/dictCollect";
import PublicTable from "@/components/PublicTable";
import { homeApi } from "@/api/lease";
import { useRouter } from "vue-router";

const form = reactive({
  queryName: "",
  assetsType: "5", // 综合体
  type: "",
});

// 获取图标颜色、状态
const getReminderStatus = computed(() => (status) => {
  let arr = [
    {},
    { name: "催", title: "即将到缴费期,请尽快缴费", color: "#f3ca3c" },
    { name: "缴", title: "财务已收到账,请尽快核销", color: "#43b766" },
    { name: "逾", title: "已逾期,请尽快催缴", color: "#db5d46" },
    { name: "验", title: "请尽快填写验收单", color: "#f3ca3c" },
    { name: "退", title: "验收审核已通过,请尽快退款", color: "#db5d46" },
    { name: "", title: "" },
  ];
  return arr[status];
});

const getUnit = computed(() => (val) => {
  if (!val) {
    return 0;
  }
  return (val / 10000).toFixed(2);
});

const tableData = ref([]);

const tableOption = ref([
  {
    label: "",
    prop: "reminderStatus",
    slot: true,
    slotName: "reminderStatus",
    align: "center",
  },
  { label: "合同名称 ", prop: "contractName", minWidth: 150, align: "center" },
  { label: "项目名称 ", prop: "projectName", minWidth: 150, align: "center" },
  { label: "资源街道 ", prop: "street", minWidth: 150, align: "center" },
  {
    label: "合同时间 ",
    minWidth: 190,
    align: "center",
    formatter: (val, row) => {
      return row.signStartTime + "-" + row.signEndTime;
    },
  },
  { label: "最近应缴纳时间 ", prop: "payEndTime", minWidth: 150, align: "center" },
  {
    label: "待开/已开发票",
    prop: "",
    minWidth: 150,
    align: "center",
    formatter: (val, row) => {
      return row.toBeInvoicedNum + "/" + row.invoicedNum;
    },
  },
  {
    label: "已缴期数/合同期数",
    prop: "",
    minWidth: 150,
    align: "center",
    formatter: (val, row) => {
      return row.contractPaidPeriodsNum + "/" + row.contractPeriodsNum;
    },
  },
  { label: "应缴押金 ", prop: "deposit", align: "center", minWidth: 80 },
  {
    label: "押金状态",
    prop: "depositStatus",
    align: "center",
    minWidth: 80,
    formatter: (val, row) => {
      let arr = [
        "",
        "待缴",
        "已缴",
        `待退(${row.refundableAmount})`,
        "已退",
        `待补(${row.refundableAmount})`,
        "未收款",
      ];
      return arr[val] || "-";
    },
  },
  { label: "已缴纳至", minWidth: 150, prop: "contractPaidTime", align: "center" },
  {
    label: "最近应缴纳金额",
    prop: "recentlyPayableAmount",
    minWidth: 150,
    align: "center",
  },
  {
    label: "缴租方式",
    prop: "payType",
    align: "center",
    minWidth: 80,
    formatter: (val) => {
      let arr = ["", "月", "季", "半年", "年"];
      return arr[val];
    },
  },
  {
    label: "审核状态",
    prop: "auditStatus",
    minWidth: 100,
    align: "center",
    formatter: (val) => {
      let arr = ["", "租赁中", "退租中", "验收审核中", "应退款"];
      return arr[val] || "-";
    },
  },
  {
    label: "缴费状态",
    prop: "paymentStatus",
    align: "center",
    minWidth: 80,
    formatter: (val) => {
      let arr = ["", "待缴费", "已逾期", "已缴费"];
      return arr[val] || "-";
    },
  },
]);

const page = reactive({
  total: 0,
  current: 1,
  size: 10,
});

const defaultInfo = ref({});
const paymentInfo = ref({});
const refundInfo = ref(null);

// 首页默认数据
const getDefault = (params) => {
  homeApi.getDefault(params).then((res) => {
    defaultInfo.value = res.data;
  });
};

// 首页应收款
const getReceivables = (params) => {
  homeApi.getReceivables(params).then((res) => {
    paymentInfo.value = res.data;
  });
};

// 首页应退款
const getRefund = (params) => {
  homeApi.getRefund(params).then((res) => {
    refundInfo.value = res.data;
  });
};

// 资产list分页
const getListPage = (params) => {
  homeApi.getListPage(params).then((res) => {
    tableData.value = res.data.content;
    page.total = res.data.totalSize;
  });
};

// 分页
const onPageChange = (e) => {
  page.current = e.page;
  page.size = e.limit;

  getListPage({
    pageNum: page.current,
    pageSize: page.size,
    param: {
      ...form,
    },
  });
};

const menu = reactive({
  currentIndex: 0,
  list: [
    {
      title: "默认",
    },
    {
      title: "应收款",
    },
    {
      title: "应退款",
    },
  ],
});

const disabled = ref(false);

const selected = (index) => {
  menu.currentIndex = index;
  let params = {
    pageNum: 1,
    pageSize: 10,
    param: {
      ...form,
      nodeType: 1,
    },
  };
  switch (index) {
    case 0:
      params.param.nodeType = 1;
      getDefault({
        ...form,
      });
      break;
    case 1:
      params.param.nodeType = 2;
      getReceivables({
        ...form,
      });
      break;
    case 2:
      params.param.nodeType = 3;
      getRefund({
        ...form,
      });
      break;
  }

  getListPage(params);
};

// 搜索
const onSearch = () => {
  page.current = 1;
  getListPage({
    pageNum: 1,
    pageSize: 10,
    param: {
      ...form,
    },
  });
  selected(menu.currentIndex);
};

// 重置
const onReset = () => {
  for (let key in form) {
    form[key] = "";
  }
  form.assetsType = "5"; // 只查询综合体
  page.current = 1;
  getListPage({
    pageNum: 1,
    pageSize: 10,
    param: { ...form },
  });
};

const router = useRouter();

const convert = (url) => {
  if (!url) {
    return "0";
  }
  return url.replaceAll("/", "@");
};
// 跳转开票历史
const toBillingHistory = (row) => {
  router.push({
    path: `/businessFinance/variousBusinessSectors/synthesis/synthesisBillHistory/${row.contractId}`,
  });
};
// 跳转应退核销
const toYingTuiHeXiao = (row) => {
  router.push({
    path: `/businessFinance/variousBusinessSectors/synthesis/yingTuiHeXiao/${row.contractId}`,
  });
};
// 开票管理
const toInvoicingManagement = (row) => {
  router.push({
    path: `/businessFinance/variousBusinessSectors/synthesis/synthesisInvoicingManagement/${row.contractId}/${row.projectName}`,
  });
};

onMounted(() => {
  getDefault({});
  getListPage({
    pageNum: 1,
    pageSize: 10,
    param: { ...form },
  });
});
</script>

<style lang="scss" scoped>
.synthesisBillPage {
  :deep(.search-input .el-input__wrapper) {
    background-color: #f7f7f7 !important;
  }
  .drop {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 600;
    background: red;
    cursor: pointer;
  }
  .search-wrap {
    .search-box {
      .menu-box {
        .active {
          background: #fc7018;
          color: #ffffff !important;
          border: none !important;
        }
        .menu-item {
          cursor: pointer;
          width: 64px;
          height: 40px;
          border-radius: 6px;
          border: 1px solid #666666;
          margin-left: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }
      .data-board-box {
        .payment-box {
          .item-box {
            width: 580px !important;
            .item-bottom-box {
              margin-right: 10px;
            }
          }
        }
        .item-box {
          width: 314px;
          height: 150px;
          background-size: 100% 100%;
          margin-right: 10px;
          background: #ffffff;
          box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
          border-radius: 20px;
        }

        .data-board-item {
          padding: 40px 40px;
          .title-name {
            font-size: 18px;
            font-weight: 400;
            color: #1a1a1a;
          }
          .item-bottom-box {
            .number-box {
              span:first-child {
                font-size: 36px;
                font-family: "ACaslonPro-Bold";
                font-weight: bold;
                color: #1a1a1a;
              }
              span:last-child {
                font-size: 14px;
                font-weight: 400;
                color: #808080;
                margin-left: 5px;
              }
            }
            .item-icon {
              width: 40px;
              height: 40px;
            }
          }
        }

        .data-board-item_2 {
          padding: 15px 40px;
          .title-name {
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            line-height: 25px;
          }
          .item-top-box {
            .number-box {
              span:first-child {
                font-size: 30px;
                font-family: "ACaslonPro-Bold";
                font-weight: bold;
                color: #1a1a1a;
              }
              span:last-child {
                font-size: 14px;
                font-weight: 400;
                color: #808080;
                margin-left: 5px;
              }
            }
          }
          .item-bottom-box {
            .left-box {
              .number-box {
                span:first-child {
                  font-size: 30px;
                  font-family: "ACaslonPro-Bold";
                  font-weight: bold;
                  color: #1a1a1a;
                }
                span:last-child {
                  font-size: 14px;
                  font-weight: 400;
                  color: #808080;
                  margin-left: 5px;
                }
              }
            }
            .item-icon {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }
  }
}
</style>
